<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
      <el-breadcrumb-item :to="{ path: '/backstage/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/backstage/personal/viewInfo' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item >修改密码</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card shadow="hover">
      <el-form label-position="top"  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input prefix-icon="el-icon-basketball" v-model="ruleForm.oldPassword" autocomplete="off" placeholder="请输入原密码" show-password clearable ></el-input>
        </el-form-item>
         <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" prefix-icon="el-icon-watermelon" autocomplete="off" placeholder="请输入新密码" show-password clearable></el-input>
        </el-form-item>
         <el-form-item label="确认密码" prop="ensurePassword">
          <el-input v-model="ruleForm.ensurePassword" prefix-icon="el-icon-apple" autocomplete="off" placeholder="请再次输入新密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import { editUserPassword } from '../../../api/backstage';
import { getStore, setStore } from '../../../storage/storage';
export default {
  name: "EditPassword",
  data() {
      var validateOldPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码！'));
        } else {
          if(getStore("password") !== value){
            callback(new Error("旧密码输入错误，请重新输入！"));
          }
          callback();
        }
      };
      var validateNewPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码！'));
        } else {
          if(getStore("password") == value){
            callback(new Error("输入的新密码与旧密码相同，请重新输入！"));
          }
          callback();
        }
      };
      var validateEnsurePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码！'));
        } else if (value !== this.ruleForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        labelPosition: 'top',
        ruleForm: {
          oldPassword: '',
          newPassword: '',
          ensurePassword: ''
        },
        account: getStore("account"),
        rules: {
          oldPassword: [
            { validator: validateOldPassword, trigger: 'blur' },
          ],
          newPassword: [
            { validator: validateNewPassword, trigger: 'blur' },
          ],
          ensurePassword: [
            { validator: validateEnsurePassword, trigger: 'blur' },
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 发送请求
            const data = {
              account: this.account,
              newPassword: this.ruleForm.newPassword,
            }
            editUserPassword(data).then(res=>{
              this.$message({
                duration: 1000,
                message: res.data.message + "请重新登陆！",
                type: "success",
              });
              setStore("password",data.newPassword);
              this.$router.push("/backstage/login");
            }).catch(err=>{
              console.log(err);
              this.$message({
                duration: 1000,
                message: res.data.message,
                type: "error",
              });
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
}
</script>

<style scoped>
.demo-ruleForm{
  width: 700px;
  height: 380px;
  margin-left: 80px;
}
</style>